﻿<!DOCTYPE html>
<html class=" transition">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
        <title>HTML5 Presentation</title>
        <link id="prettify-link" href="http://slides.html5rocks.com/src/prettify/prettify.css" rel="stylesheet" disabled="">
        <link href="./help_files/presentation.css" rel="stylesheet" type="text/css" media="screen">
        <link href="./help_files/common.css" rel="stylesheet" type="text/css" media="screen">
        <link href="style.css" rel="stylesheet" />
    <body>
        <div id="flex-container">

            <div class="slides" style="display: block;">
                <div id="presentation-counter">1</div>
                <div class="slide current" id="landing-slide">
                    <section class="middle">
                        <hgroup>
                            <h1 style="font-size: 3em;font-weight:900; color:#000">
                                BÁO CÁO CÔNG VIỆC TUẦN 1-2
                            </h1>
                        </hgroup>
                        <div update="">
                            <a>Người thực hiện:</a><br />
                            <span>Nguyễn Ngọc An</span><br />
                            <span>Trương Đăng Khoa</span><br />
                            <small>~14/6/2014</small>
                        </div>
                    
                        <p>Press <span id="left-init-key" class="key">→</span> key to advance.</p>
                    </section>
                    <span class="counter"></span>
                </div>
                <div class="slide offline-storage distant-slide" id="selector-slide">
                    <header><span class="js">JS</span> <h1>selectors</h1></header>
                    <section>
                        <pre class="prettyprint">
<span class="com">//get element by id</span>
    <b><span class="pln">jsu.selectorElement("#btnblue")</span></b>
<span class="com">//get element by classname</span>
    <b><span class="pln">jsu.selectorNodeList(".btnred")</span></b>
<span class="com">//get element by tagname</span>
    <b><span class="pln">jsu.selectorNodeList("button")</span></b>
<span class="com">//get element by all</span>
    <b><span class="pln">jsu.selectorNodeList("*")</span></b>
                        </pre>
                        <p id="localstorage-message">Example:</p>
                        <div id="btnExam">
                            <button id="btnblue" onclick='alert(jsu.selectorElement("#btnblue").getText());'>
                                Selector Id "btnBlue"
                            </button>
                            <button class="btnred" onclick='alert(jsu.selectorElement(".btnred").getText());'>
                                Selector ClassName "btnred"
                            </button>
                            <button onclick="funcSelectorTagName();">
                                Selector TagName
                            </button>
                            <button onclick="funcSelectorAll();">
                                Selector All
                            </button>
                            <script>
                                function funcSelectorTagName()
                                {
                                    var arr = jsu.selectorNodeList("#btnExam > button").getText();
                                    var message = "There are "+arr.length +" button Tags ";
                                    for (var i in arr)
                                    {
                                        message += "\n"+arr[i];
                                    }
                                    
                                    alert(message);

                                    
                                }
                                function funcSelectorAll() {
                                    var arr = jsu.selectorNodeList("#btnExam > *").getText();
                                    var message = "There are "+arr.length +" Tags";
                            

                                    for (var i in arr) {
                                        message += "\n"+arr[i];
                                    }
                                    
                                    alert(message);
                                }
                            </script>
                        </div>
                        <p id="ta-log"></p>
                    </section>
                    <span class="counter"></span>
                </div>

                <div class="slide offline-storage distant-slide" id="attributes-slide">
                    <header><span class="js">JS</span> <h1>attributes</h1></header>
                    <section>
                        <pre class="prettyprint"><span class="com">//add/remove class</span>
    <b><span class="pln">jsu.selectorElement("#lbl").setClassName("abc")
    jsu.selectorElement("#lbl").removeClassName()
        </span></b>
<span class="com">//add/remove attribute</span>
    <b><span class="pln">jsu.selectorElement("#lbl").setAttribute("style", "border: 4px solid red")
    jsu.selectorElement("#lbl").removeAttribute("style")
        </span></b>
<span class="com">//get value/html của element</span>
    <b><span class="pln">jsu.selectorElement("#btn5").getText()
    jsu.selectorElement("#btn6").getHTML()</span></b>
                        </pre>
                        <p id="localstorage-message">Example:</p>
                        <div id="btnExam">
                            <button id="btn1" onclick='jsu.selectorElement("#lbl").setClassName("abc")'>
                                Add class
                            </button>
                            <button id="btn2" onclick='jsu.selectorElement("#lbl").removeClassName()'>
                                Remove class
                            </button>
                            <button id="btn3" onclick='jsu.selectorElement("#lbl").setAttribute("style", "border: 4px solid red")'>
                                Add attribute
                            </button>
                            <button id="btn4" onclick='jsu.selectorElement("#lbl").removeAttribute("style")'>
                                Remove attribute
                            </button>
                            <button id="btn5" onclick='jsu.selectorElement("#lbl").setText(jsu.selectorElement("#btn5").getText())'>
                                get text
                            </button>
                            <button id="btn6" onclick='alert(jsu.selectorElement("#btn6").getHTML())'>
                                <b>get html</b>
                            </button>
                            <hr /><br />
                            <label id="lbl">Label</label>
                            <script>

                            </script>
                        </div>
                        <p id="ta-log"></p>
                    </section>
                    <span class="counter"></span>
                </div>

                <div class="slide offline-storage distant-slide" id="ajax-slide">
                    <header><span class="js">JS</span> <h1>ajax</h1></header>
                    <section>
                        <pre class="prettyprint"><span class="com">//ajax: get, getJSONP</span>
                        <b><span class="pln">
        jsu.ajax(
        {
            url: "feedback.html",
            type: "GET",
            success: function(html)
            {
                jsu.selectorElement("#demo4").setHTML(html);
            },
            error: function ()
            {
                alert("Error!!!!");
            }
        });
        </span></b>
                        </pre>
                        <p id="localstorage-message">Example:</p>
                        <div id="btnExam">
                            <button id="btn1" onclick='funcAjax();'>
                                Load feedback.html
                            </button>
                            <hr /><br />
                            <div id="demo4"></div>
                            <script>
                                function funcAjax() {
                                    jsu.ajax({
                                        url: "feedback.html",
                                        type: "GET",
                                        success: function(html) {
                                            jsu.selectorElement("#demo4").setHTML(html);
                                        },
                                        error: function() {
                                            alert("Error!!!!");
                                        }
                                    });
                                }
                            </script>
                        </div>
                        <p id="ta-log"></p>
                    </section>

                    <span class="counter"></span>
                </div>

                <div class="slide offline-storage distant-slide" id="css-slide">
                    <header><span class="js">JS</span> <h1>css</h1></header>
                    <section>
                        <pre class="prettyprint"><span class="com">//css:get width,height.</span>
                        <b><span class="pln">
        jsu.selectorElement("#demo5").css("width");
        </span></b>
                        </pre>
                        <p id="localstorage-message">Example:</p>
                        <div id="demo5" style="width:600px; height: 50px; border:3px solid red;">Demo5</div>
                        <div id="btnExam">
                            <button onclick='jsu.selectorElement("#demo6").setText("Width: " + jsu.selectorElement("#demo5").css("width"))'>
                                Get width
                            </button>
                            <button onclick='jsu.selectorElement("#demo6").setText("Height: " + jsu.selectorElement("#demo5").css("height"))'>
                                Get height
                            </button>
                            <button onclick='jsu.selectorElement("#demo6").setText("Border: " + jsu.selectorElement("#demo5").css("border"))'>
                                Get border
                            </button>
                            <hr /><br />
                            <div id="demo6">Label</div>

                        </div>
                        <p id="ta-log"></p>
                    </section>

                    <span class="counter"></span>
                </div>

                <div class="slide offline-storage distant-slide" id="events-slide">
                    <header><span class="js">JS</span> <h1>events</h1></header>
                    <section>
                        <pre class="prettyprint"><span class="com">//Events: onload,click</span>
                        <b><span class="pln">
    jsu.selectorElement("#demo7").onclick(function () {
        alert("Click Button 1!!!");
    });
    jsu.selectorElement("#demo7").onload(function () {
        alert("Load button 1!!!");
    });
        </span></b>
                        </pre>
                        <p id="localstorage-message">Example:</p>
                        <div id="btnExam">
                            <button id="demo7">
                                Button 1
                            </button>


                        </div>
                        <p id="ta-log"></p>
                    </section>

                    <span class="counter"></span>
                </div>


                <div class="slide offline-storage distant-slide" id="data-slide">
                    <header><span class="js">JS</span> <h1>data</h1></header>
                    <section>
                        <pre class="prettyprint"><span class="com">//data: Localcache</span>
                        <b><span class="pln">
    //Set
        jsu.StorageBrowser.set("value", "abc")
    //Get
        jsu.StorageBrowser.get("value")
    //Remove
        jsu.StorageBrowser.removeKey("value")
        </span></b>
                        </pre>
                        <p id="localstorage-message">Example:</p>
                        <div id="btnExam">
                            <a>Name;</a>
                            <input type="text" id ='localstorage-key'/>    
                            <br />
                            <a>Value:</a>
                            <textarea id="localstorage-value" placeholder="enter value"></textarea>
                            <br />
                            <button id="demo8" onclick="jsu.StorageBrowser.set(jsu.selectorElement('#localstorage-key').getVal(), jsu.selectorElement('#localstorage-value').getVal())">
                                Save
                            </button>
                            <button id="demo9" onclick="jsu.selectorElement('#localstorage-value').setText(jsu.StorageBrowser.get(jsu.selectorElement('#localstorage-key').getVal()))">
                                Get value
                            </button>
                            <button id="demo10" onclick="jsu.StorageBrowser.removeKey(jsu.selectorElement('#localstorage-key').getVal())">
                                Remove
                            </button>
                            <hr /><br />
                            <div id="result"></div>
                        </div>
                        <p id="ta-log"></p>
                    </section>

                    <span class="counter"></span>
                </div>

                <div class="slide offline-storage distant-slide" id="plugin-slide">
                    <header><span class="js">JS</span> <h1>plugin</h1></header>
                    <section>
                        <pre class="prettyprint"><span class="com">//plugin boxy popup</span>
                        <b><span class="pln">
    //Setup
        jsu.selectorElement("#abc").feedback(
        {
            width: 700,
            height: 300,
            left: 300,
            top: 10,
            title: "Are you ready?",
            button: "Gửi"
        });
        </span></b>
                        </pre>
                        <p id="localstorage-message">Example:</p>
                        <div id="btnExam">
                            <button id="demo10" onclick='jsu.selectorElement("#result1").feedback({width: 700, height: 300, left: 100, top: 500, title: "Are you ready?", button: "Gửi"});'>
                                Plugin
                            </button>
                            <hr /><br />
                            <div id="result1"></div>
                        </div>
                        <p id="ta-log"></p>
                    </section>

                    <span class="counter"></span>
                </div>

                <!--<div id="speaker-note" class="invisible" style="display: none;">undefined</div>-->
                <aside id="help" class="sidebar invisible" style="display: none;">
                    <table>
                        <caption>Help</caption>
                        <tbody>
                            <tr>
                                <th>Move Around</th>
                                <td>←&nbsp;→</td>
                            </tr>
                            <tr>
                                <th>Source File</th>
                                <td>s</td>
                            </tr>
                            <tr>
                                <th>Change Theme</th>
                                <td>t</td>
                            </tr>
                            <tr>
                                <th>Syntax Highlight</th>
                                <td>h</td>
                            </tr>
                            <tr>
                                <th>Speaker Notes</th>
                                <td>n</td>
                            </tr>
                            <tr>
                                <th>Toggle 3D</th>
                                <td>3</td>
                            </tr>
                            <tr>
                                <th>Help</th>
                                <td>0</td>
                            </tr>
                        </tbody>
                    </table>
                </aside>
            </div> <!-- slides -->
        </div>
        <script src="./help_files/utils.js"></script>

        <script src="jsu.min.js"></script>
        <script src="feedback.plugin.js"></script>
        <style>
            .abc {
                font-size: 4em;
            }
        </style>
        <script>
                                jsu.selectorElement("#demo7").onclick(function() {
                                    alert("Click Button 1!!!");
                                });

                                //jsu.selectorElement("#demo7").onload(function () {
                                //    alert("Load button 1!!!");
                                //});
        </script>

    </body>
</html>